<template>
    <div class="test">
        <scroll ref="scroll" class="scroll-content" :data="lunbo">
            <div>
                <!-- 轮播图 -->
                <div v-if="lunbo.length" class="slider-wrapper">
                    <slider>
                        <div v-for="item in lunbo">
                            <a :href="item.url">
                                <img class="needsclick" :src="item.src">
                            </a>
                        </div>
                    </slider>
                </div>
                <button @click="setLoading=!setLoading">点击加载</button>
                <button @click="showToast">点击Toast</button>
                <button @click="setAlert=true">点击Alert</button>
                <button @click="setConfirm=true">点击confirm</button>
                <p><i class="icon-calendar2"></i>xxxxxxxxxxxxxxxxx</p>
                <p><i class="icon-headphones"></i>xxxxxxxxxxxxxxxxx</p>
                <p><i class="icon-spinner3"></i>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxx</p>
                <loading title="点击加载" v-show="setLoading"></loading>
            </div>
        </scroll>

        <loading title="点击加载" v-show="setLoading"></loading>
        <kgm-alert msg="请输入提示的相关信息！" v-show="setAlert" @sure-alert="sureAlert"></kgm-alert>
        <kgm-confirm msg="您确认要提交订单吗？" v-show="setConfirm" @sure-confirm="sureConfirm" @cancel-confirm="cancelConfirm"></kgm-confirm>
    </div>
</template>

<script>
import Loading from '../../base/loading/loading.vue'    //加载小图标
import {toast} from '../../base/js/toast.js'            //toast
import kgmAlert from '../../base/alert/alert.vue'       //弹出框
import kgmConfirm from '../../base/alert/confirm.vue'   //确认还是取消框
import Slider from '../../base/slider/slider.vue'       //轮播图
import Scroll from '../../base/scroll/scroll.vue'       //轮播图
export default {
    data() {
        return {
            setLoading: false,  //加载
            setAlert: false,    //显示弹框
            setConfirm: false,  //确认还是取消框
            lunbo: [],          //轮播图
        }
    },
    props: {},
    created() {
        this.getLunbo()
    },
    components: {
        Loading, kgmAlert, kgmConfirm, Slider, Scroll
    },
    methods: {
        //弹出toast
        showToast(){
            toast('请输入提示信息！', 1000)
        },
        //显示弹框
        sureAlert(){
            this.setAlert = false
        },
        //确认当前操作
        sureConfirm(){
            this.setConfirm = false
            toast('您已经确认了操作', 1000)
        },
        // 取消当前操作
        cancelConfirm(){
            this.setConfirm = false
            toast('你已经取消了当前操作', 1000)
        },
        // 获取lunbotu
        async getLunbo(){
            try {
                var result = await this.$ajax.get('http://39.108.104.0:5001/lunbotu')
                if(result.data.status == 0) {
                    this.lunbo = result.data.message
                    console.log(this.lunbo)
                }
            } catch(err) {
                toast('获取轮播图失败！')
            }
        },

    }
}
</script>
<style  lang="less" scoped>
.test{
    position:fixed;
    top:0;
    bottom:0;
    width:100%;
    .scroll-content{
        height:100%;
        overflow:hidden;
        .slider-wrapper{
            position:relative;
            max-width:100%;
            margin:10px;
            border-radius: 5px;
            box-sizing:border-box;
            overflow: hidden;
        }
    }
    
}
</style>
